<html>
<head>
    <script src="../tma.js"></script>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec4 aVertexColor;
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
        varying vec4 vColor;
        void main() {
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            vColor = aVertexColor;
        }
    </script>
    <script id="shader-fs" type="x-shader/x-fragment">
        precision mediump float;
        varying vec4 vColor;
        void main() {
            gl_FragColor = vColor;
        }
    </script>
    <script>
        tma.extlibs = [ 'ext/gl-matrix.js' ];
        tma.onload = function () {
            // NeHe tutorial #3.
            var screen = new TmaScreen(500, 500, TmaScreen.MODE_3D);
            screen.attachTo(TmaScreen.BODY);

            // Initializes buffers.
            var triangleVertices = screen.createBuffer([
                 0.0,  1.0,  0.0,
                -1.0, -1.0,  0.0,
                 1.0, -1.0,  0.0
            ]);
            var triangleColors = screen.createBuffer([
                1.0, 0.0, 0.0, 1.0,
                0.0, 1.0, 0.0, 1.0,
                0.0, 0.0, 1.0, 1.0
            ]);
            var squareVertices = screen.createBuffer([
                 1.0,  1.0,  0.0,
                -1.0,  1.0,  0.0,
                 1.0, -1.0,  0.0,
                -1.0, -1.0,  0.0
            ]);
            var squareColors = screen.createBuffer([
                0.5, 0.5, 1.0, 1.0,
                1.0, 0.5, 1.0, 0.5,
                0.5, 1.0, 1.0, 0.5,
                0.5, 0.5, 1.0, 1.0
            ]);

            // Initializes program with shaders.
            var program = screen.createProgram('shader-vs', 'shader-fs');

            // Initializes matrices.
            var pMatrix = mat4.create();
            var mvMatrix = mat4.create();
            mat4.perspective(
                    45, screen.width / screen.height, 0.1, 100.0, pMatrix);
            mat4.identity(mvMatrix);
            program.setUniformMatrix('uPMatrix', pMatrix);

            // Initializes screen.
            screen.fillColor(0.0, 0.0, 0.0, 1.0);

            // Draws triangle.
            mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
            program.setAttributeArray(
                    'aVertexPosition', triangleVertices, 0, 3, 0);
            program.setAttributeArray(
                    'aVertexColor', triangleColors, 0, 4, 0);
            program.setUniformMatrix('uMVMatrix', mvMatrix);
            program.drawArrays(Tma3DScreen.MODE_TRIANGLES, 0, 3);

            // Draws square.
            mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
            program.setAttributeArray(
                    'aVertexPosition', squareVertices, 0, 3, 0);
            program.setAttributeArray(
                    'aVertexColor', squareColors, 0, 4, 0);
            program.setUniformMatrix('uMVMatrix', mvMatrix);
            program.drawArrays(Tma3DScreen.MODE_TRIANGLE_STRIP, 0, 4);
        };
    </script>
</head>
</html>
